<!-- Success -->
<div
  role="alert"
  class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-green-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
  <div class="flex items-start gap-4">
    <div class="flex-1">
      <strong class="block font-medium">Changes saved</strong>

      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        Your API key have been added successfully.
      </p>
    </div>
  </div>
  <button
    class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
  >
    <span class="sr-only">Dismiss popup</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="h-5 w-5"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>
</div>
<!-- Warning -->
<div
  role="alert"
  class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-amber-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
  <div class="flex gap-4">
    <div class="flex-1">
      <strong class="block font-medium">Warning</strong>

      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        You have only 200 tokens left in the account.
      </p>
    </div>
  </div>
  <button
    class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
  >
    <span class="sr-only">Dismiss popup</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="h-5 w-5"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>
</div>
<!-- Error -->
<div
  role="alert"
  class="flex w-full max-w-md items-start justify-between rounded-r-xl border-l-4 border-red-600 bg-slate-50 p-4 text-slate-800 shadow-xl dark:bg-slate-800 dark:text-slate-50"
>
  <div class="flex gap-4">
    <div class="flex-1">
      <strong class="block font-medium">Error</strong>

      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        The specified model was not found. Try another model.
      </p>
    </div>
  </div>
  <button
    class="text-slate-500 transition hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-500"
  >
    <span class="sr-only">Dismiss popup</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="h-5 w-5"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </button>
</div>
